<template>
  <!-- 适配车型弹层 -->
  <div class='aa-adaptationCar' v-if="validAutos.length>0">
    <!-- 单个车型品牌 -->
    <div class='aa-carBrandBox' v-for="(item, index) in validAutos" :key="index">
      <div class='aa-carBrandName'>
        <span>{{item.abName}}</span>
      </div>
      <!-- 单个车系 -->
      <div class='aa-carSystemBox' v-for="(oneAutoDetail, autoDetail_index) in item.details" :key="autoDetail_index">
        <div class='aa-carSystemName'>
          <span>{{oneAutoDetail.amName}} {{oneAutoDetail.asName}}</span>
        </div>
        <div class='aa-carParameter' v-for="(oneParam, param_index) in oneAutoDetail.aparams" :key="param_index">
          <span class='aa-carParameterLeft'>{{oneParam.param}}</span>
          <span class='aa-carParameterRight'>{{oneParam.year}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      partItemId: 0, //产品ID
      validAutos: [], //车型列表
    }
  },
  props: {
    partItemFitAutoDialog_input: {
      type: Object,
      value: {}
    }
  },
  created() {
    this.partItemId = this.partItemFitAutoDialog_input.partItemId
    this.GetFitAutoByPartItem();
  },
  methods: {
    on_close_click() {
      this.triggerEvent('close')
    },
    async GetFitAutoByPartItem() {
      const res = await this.$appServive({
        url: "/Misc/GetFitAutoByPartItem_ForShop",
        data: {
          partItemId: this.partItemId
        },
        isShowLoading: true,
      });
      this.validAutos = res.validAutos || [];
    }
  }
}
</script>

<style scpoed>
/* components/partItemFitAutoDialog/partItemFitAutoDialog.wxss */
/* 适配车型相关弹层样式 */
.aa-adaptationCar {
  width: 100%;
  padding: 0.4rem 0.4rem 0;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-carBrandBox {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 0.21rem;
  box-shadow: 0 0 0.16rem #e8e8e8;
  margin-bottom: 0.32rem;
  float: left;
  clear: left;
}
.aa-carBrandName {
  width: 100%;
  padding: 0.08rem 0.32rem;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-carBrandName > span {
  width: auto;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  float: left;
  clear: left;
}
.aa-carSystemBox {
  width: 100%;
  float: left;
  clear: left;
}
.aa-carSystemName {
  width: 100%;
  padding: 0.08rem 0.32rem;
  background: rgba(229, 250, 255, 0.6);
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-carSystemName > span {
  width: auto;
  font-size: 0.37rem;
  line-height: 0.64rem;
  text-align: left;
  color: #666;
  float: left;
  clear: left;
}
.aa-carParameter {
  width: 100%;
  padding: 0.08rem 0.32rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-carParameter > span {
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: left;
  color: #666;
  float: left;
  clear: none;
}
.aa-carParameter > text.aa-carParameterLeft {
  width: 3.8rem;
}
.aa-carParameter > text.aa-carParameterRight {
  width: 3.12rem;
}
</style>
